<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <span>分类</span>
      </div>
      <el-table :data="categoryList" border stripe row-key="id" :tree-props="{children: 'abc', hasChildren: 'bcd'}">
        <el-table-column
          prop="name"

          label="菜单名称"
        />
        <el-table-column
          label="icon"
        >
          <template slot-scope="scope">
            <img width="80" height="80" :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"

          label="分类名称"
        />
        <el-table-column
          prop="sort"

          label="排序"
        />
        <el-table-column
          prop="showStatus"

          label="显示状态"
        >
          <template slot-scope="scope">
            <div> {{ scope.row.showStatus===0?'不显示':'显示' }} </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="showStatus"

          label="导航栏展示"
        >
          <template slot-scope="scope">
            <div> {{ scope.row.navStatus
              ===0?'不展示':'展示' }} </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"

          label="描述"
        />
        <el-table-column
          prop="createTime"

          label="创建时间"
        />
      </el-table>

    </el-card>

  </div>
</template>
<script>
import {
  getAllCategory as getAllCategoryApi
} from '@/api/product/list'
export default {
  name: 'ProductCategory',
  mixins: [],
  data() {
    return {
      categoryList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getCategoryList()
  },
  mounted() {
  },
  methods: {
    async getCategoryList() {
      const res = await getAllCategoryApi()
      const { success, data, message } = res
      if (success) {
        // this.categoryList = data.items
        data.items.forEach(item => {
          this.categoryList.push({
            ...item.category,
            abc: item.children
          })
        })
        console.log(' data.items==>', data.items)
        console.log('this.categoryList==>', this.categoryList)
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
